<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息页面</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
</head>
<body>
	<!-- 修改用户的模态框 -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">员工修改</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="emp_update_form">
						<!-- 员工姓名 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">empName</label>
							<div class="col-sm-10">
								<p class="form-control-static" id="empName_update_static"></p>
							</div>
						</div>
						<!-- 员工邮箱 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="email_update_input"
									name="email">
							</div>
						</div>
						<!-- 员工性别 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_update_input" value="M"
									checked="checked"> 男
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender2_update_input" value="F"> 女
								</label>
							</div>
						</div>
						<!-- 部门名称 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
								<!-- 提交部门id即可 -->
								<select class="form-control" name="dId" id="dept_update_select">
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="emp_update_btn">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 添加用户的模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">员工添加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="emp_add_form">
						<!-- 员工姓名 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">empName</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="empName_add_input"
									name="empName" placeholder="empName">
							</div>
						</div>
						<!-- 员工邮箱 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="email_add_input"
									name="email" placeholder="email@cvicse.com">
							</div>
						</div>
						<!-- 员工性别 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_add_input" value="M"
									checked="checked"> 男
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender2_add_input" value="F"> 女
								</label>
							</div>
						</div>
						<!-- 部门名称 -->
						<div class="form-group">
							<label class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
								<!-- 提交部门id即可 -->
								<select class="form-control" name="dId" id="dept_add_select">
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="emp_save_btn">确定</button>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button type="button" class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button type="button" class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<table class="table table-hover" id="emps_table">
				<thead>
					<tr>
						<th>#</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条 -->
			<div class="clo-md-6" id="page_nav_area"></div>
		</div>
	</div>

	<script type="text/javascript">
		//添加一个全局变量 总记录数 用于跳转最后一页
		var totalRecord;
		//1.页面加载完成后直接发送一个ajax请求要到分页数据
		$(function() {
			//页面加载后默认去首页
			to_page(1);
		});
		//点击分页后去指定的页面
		function to_page(pn) {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=" + pn,
				type : "GET",
				success : function(result) {
					//console.log(result);
					//1.解析并显示员工数据
					bulid_emps_table(result);
					//2.解析并显示分页信息数据
					bulid_page_info(result);
					//3.解析并显示分页条数据
					bulid_page_nav(result);
				}
			});
		}
		//员工数据表
		function bulid_emps_table(result) {
			//初始化员工数据表
			$("#emps_table tbody").empty();
			//写入员工数据表
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(
						item.gender == 'M' ? "男" : "女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>")
						.append(item.department.deptName);
				var editBtn = $("<button></button>").addClass(
						"btn btn-primary btn-xs edit_btn").append(
						$("<span></span>").addClass(
								"glyphicon glyphicon-pencil")).append("编辑");
				//为编辑按钮添加自定义属性来表示当前员工id
				editBtn.attr("edit-id", item.empId);
				var delBtn = $("<button></button>").addClass(
						"btn btn-danger btn-xs delete_btn").append(
						$("<span></span>").addClass(
								"glyphicon glyphicon-remove")).append("删除");
				//为删除按钮添加自定义属性来表示要删除的员工id
				delBtn.attr("del-id", item.empId);
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(
						delBtn);
				//.append方法执行完成后返回的还是原来的元素
				$("<tr></tr>").append(empIdTd).append(empNameTd).append(
						genderTd).append(emailTd).append(deptNameTd).append(
						btnTd).appendTo("#emps_table tbody");
			});
		}

		//分页信息
		function bulid_page_info(result) {
			//初始化分页信息
			$("#page_info_area").empty();
			//写入分页信息
			$("#page_info_area").append(
					"当前" + result.extend.pageInfo.pageNum + "页").append(" ")
					.append("总" + result.extend.pageInfo.pages + "页").append(
							" ").append(
							"总" + result.extend.pageInfo.total + "条记录").append(
							" ")
			totalRecord = result.extend.pageInfo.total;
		}
		//分页条,点击分页要能跳转到相关页面
		function bulid_page_nav(result) {
			//初始化分页条
			$("#page_nav_area").empty();
			//构建元素
			var ul = $("<ul></ul>").addClass("pagination");
			var firstPageLi = $("<li></li>").append(
					$("<a></a>").append("首页").attr("href", "#"));
			var prePageLi = $("<li></li>").append(
					$("<a></a>").append("&laquo;"));
			//如果没有前一页(当前是第一页),将首页和前一页设置为不可点击
			if (result.extend.pageInfo.hasPreviousPage == false) {
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			} else {
				//为首页添加点击翻页的事件
				firstPageLi.click(function() {
					to_page(1);
				});
				//为前一页添加点击翻页的事件
				prePageLi.click(function() {
					to_page(result.extend.pageInfo.pageNum - 1);
				});
			}

			var nextPageLi = $("<li></li>").append(
					$("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append(
					$("<a></a>").append("末页").attr("href", "#"));
			//如果没有后一页(当前页是最后一页),将后一页和末页设置为不可点击
			if (result.extend.pageInfo.hasNextPage == false) {
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			} else {
				//为下一页添加点击翻页的事件
				nextPageLi.click(function() {
					to_page(result.extend.pageInfo.pageNum + 1);
				});
				//为末页添加点击翻页的事件
				lastPageLi.click(function() {
					to_page(result.extend.pageInfo.pages);
				});
			}
			//1.向ul标签中添加首页和前一页的li标签
			ul.append(firstPageLi).append(prePageLi);
			$.each(result.extend.pageInfo.navigatepageNums, function(index,
					item) {
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				//如果pageNum等于遍历的页码,则此页码高亮显示(高亮显示当前页码)
				if (result.extend.pageInfo.pageNum == item) {
					numLi.addClass("active");
				}
				//numLi添加绑定点击事件,使页面完成跳转
				numLi.click(function() {
					to_page(item);
				});
				//2.向ul标签中循环添加遍历出的1,2,3...的li标签
				ul.append(numLi);
			});
			//3.向ul标签中添加后一页和末页的li标签
			ul.append(nextPageLi).append(lastPageLi);
			//将ul元素添加到nav元素中
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		/* 为添加按钮绑定点击事件 */
		$("#emp_add_modal_btn").click(function() {
			//ajax发送请求获取部门信息
			getDepts("#dept_add_select");
			//弹出模态框
			$("#empAddModal").modal({
				backdrop : "static"
			});
		});
		/* 获取部门信息 */
		function getDepts(ele) {
			//初始化
			$(ele).empty();
			$.ajax({
				url : "${APP_PATH}/depts",
				type : "GET",
				success : function(result) {
					//console.log(result);
					//$("#dept_add_select").append()
					//each遍历每一个result.extend.depts中的部门信息,包括deptId和deptName
					$.each(result.extend.depts, function() {
						var optionEle = $("<option></option>").append(
								this.deptName).attr("value", this.deptId);
						optionEle.appendTo(ele);
					});
				}
			});
		}
		/* emp_save_btn绑定点击事件 */
		$("#emp_save_btn").click(function() {
			//1.模态框中填写的表单数据交给服务器保存
			//2.发送ajax请求保存员工
			$.ajax({
				url : "${APP_PATH}/emp",
				type : "POST",
				data : $("#emp_add_form").serialize(),
				success : function(result) {
					//1.关闭模态框
					$("#empAddModal").modal('hide');
					//2.来到最后一页显示刚才添加的数据
					//发送ajax请求显示最后一页的数据
					to_page(totalRecord);
				}
			});
		});
		/* edit_btn绑定点击事件 */
		$(document).on("click", ".edit_btn", function() {
			//alert("edit");
			//获取部门信息
			getDepts("#dept_update_select");
			//获取员工信息
			getEmp($(this).attr("edit-id"));
			//把员工id传递给模态框的更新按钮
			$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
			//弹出模态框
			$("#empUpdateModal").modal({
				backdrop : "static"
			});
		});
		//获取员工信息
		function getEmp(id) {
			$.ajax({
				url : "${APP_PATH}/emp/" + id,
				type : "GET",
				success : function(result) {
					//console.log(result);
					var empData = result.extend.emp;
					$("#empName_update_static").text(empData.empName);
					$("#email_update_input").val(empData.email);
					$("#empUpdateModal input[name=gender]").val(
							[ empData.gender ]);
					$("#empUpdateModal select").val([ empData.dId ]);
				}
			});
		}
		//点击确认,更新员工信息
		$("#emp_update_btn").click(function() {
			//发送ajax请求保存更新信息
			$.ajax({
				url : "${APP_PATH}/emp/" + $(this).attr("edit-id"),
				type : "POST",
				data : $("#empUpdateModal form").serialize() + "&_method=PUT",
				success : function(result) {
					alert(result.msg);
				}
			});
		});
		/* delete_btn绑定点击事件 */
		$(document).on("click", ".delete_btn", function() {
			//1.弹出确认删除对话框
			var empName = $(this).parents("tr").find("td:eq(1)").text();
			var empId = $(this).attr("del-id");
			if (confirm("确认删除[" + empName + "]吗?")) {
				//确认,发送ajax请求
				$.ajax({
					url : "${APP_PATH}/emp/" + empId,
					type : "DELETE",
					success : function(result) {
						alert(result.msg);
					}
				});
			}
		});
	</script>
</body>
</html>